<script setup>
import { defineEmits, defineProps, ref, watch } from "vue";
import axios,{getServerUrl} from "@/util/axios";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue"

const tableData = ref([]);

const props = defineProps({
  imageDetailsValue:{
    type:Object,
    default:()=>{},
    Required:true
  }
});

const headers = ref({
  token:window.sessionStorage.getItem("token")
})

const ruleForm = ref({
  id: -1,
  image:''
});

const ruleFormRef = ref(null);

const imageUrl = ref("")

watch(
  //里面有两个参数，第一个props监听哪个参数
  () => props.imageDetailsValue,
  //第二个监听后要执行的哪个操作
  () => {
    ruleForm.value = props.imageDetailsValue;
    imageUrl.value = getServerUrl()+'/image/fruitType/'+ruleForm.value.image
  },
  {deep:true,immediate:true}
);

// 定义父组件事件
const emits = defineEmits([
  "update:modelValue",
  "initBigTypeList",
  "initFruitTypeList",
]);
const handleClose = () => {
  console.log("xxx");
  // 调用执行
  emits("update:modelValue", false);
};

//回显修改后的图片
const handleAvatarSuccess=(res)=>{
  imageUrl.value = getServerUrl()+res.data.src
  ruleForm.value.image = res.data.title
}


const handleConfirm=async()=>{
 
      let result = await axios.post("admin/fruitType/save", ruleForm.value);
      let data = result.data;
      if (data.code == 0) {
        ElMessage.success("执行成功");
        ruleFormRef.value.resetFields();
        emits("initFruitTypeList");
        handleClose();
      } else {
        ElMessage.error(data.msg);
      }
};
</script>

<template>
  <!-- Dialog 对话框实现详情按钮弹窗显示， 饿了么ui组件 -->
  <!-- model-value是否显示 Dialog -->
  <!-- title说明：Dialog 对话框 Dialog 的标题， 也可通过具名 slot （见下表）传入 -->
  <!-- detailsVisible是从父组件order下index传过来 -->
  <el-dialog
    model-value="imageDetailsVisible"
    title="图片更换"
    width="30%"
    @close="handleClose"
    center
  >
    <el-form
      ref="ruleFormRef"
      style="text-align: center;"
      :model="ruleForm"
      label-width="100px"
    >
      <el-upload
        :headers="headers"
        class="avatar-uploader"
        :action="getServerUrl()+'/admin/fruitType/uploadImage'"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleConfirm">确认更换</el-button>
        <!-- <el-button type="primary" @click="handleClose">取消</el-button> -->
      </div>
    </template>
  </el-dialog>
</template>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>